<template>
    <div id="qualitylist">
        <yd-pullrefresh :callback="loadListTop" ref="pullrefreshDemo">
            <div class="fiexd_search">
                <div class="fiexd_list">
                    <div class="fiexd_lefts" @click="fiexdGo">
                        <img src="../../assets/rightcon.png">
                    </div>
                    <div class="fiexd_conter">
                        <yd-search v-model="value" cancel-text='' placeholder="商品名称" :on-cancel='delHandler' :on-submit="submitHandler"></yd-search>
                    </div>
                    <div class="fiexd_rights">
                        <yd-cell-item arrow type="label">
                            <select slot="right" v-model="mondyPrice" @change="searchSelect(startPrice)">
                                <option value="0">全部价格</option>
                                <option value="50">100元左右</option>
                                <option value="150">200元左右</option>
                                <option value="250">300元左右</option>
                                <option value="350">300元以上</option>
                            </select>
                        </yd-cell-item>
                    </div>
                </div>
                <div class="fiexd_ul_list">
                    <ul class="fiexd_ul" :class="{'fiexdShow':isShow}">
                        <li @click="fiexdBtn(item,index)" :class="{'active':isActive[index]}" v-for="(item,index) in fiexdItem" :key="index">
                            {{item.gcName}}
                        </li>
                    </ul>
                    <div class="arrow_btn" :class="{'arrowShow':isShow}" @click="isShowBtn">
                        <yd-icon name="arrow-left-copy" custom slot="icon"></yd-icon>
                    </div>
                </div>
            </div>
            <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
                <yd-list theme="3" slot="list">
                    <!-- <yd-list-item :href="{name: 'commodity',query: {goodsCommonid: item.goodsCommonid}}" type="link" v-for="(item, key) in list" :key="key"> -->
                    <yd-list-item v-for="(item, key) in list" :key="key">
                        <img slot="img" :src="imgUrl+item.goodsImage" @click="commodity(item.goodsCommonid)">
                        <span slot="title">{{item.goodsName}}</span>
                        <yd-list-other slot="other">
                            <div>
                                <span class="demo-list-price">
                                    <em>¥</em>
                                    <yd-countup :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                                </span>
                                <!-- <span class="decoration-price" v-show="item.scId != 1 && item.goodsPrice != item.goodsMarketprice"> -->
                                <!-- <span class="decoration-price" v-show="item.goodsPrice != item.goodsMarketprice">
                                    <b>￥</b>
                                    <yd-countup v-if="item.goodsMarketprice" :endnum="item.goodsMarketprice" duration="0.1" decimals="2" separator=","></yd-countup>
                                    <span v-else>0</span>
                                </span> -->
                            </div>
                            <!-- <div>---</div>  -->
                        </yd-list-other>
                    </yd-list-item>
                </yd-list>
                <!-- 数据全部加载完毕显示 -->
                <span slot="doneTip">—— 到底啦 ——</span>
                <!-- 加载中提示，不指定，将显示默认加载中图标 -->
                <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
            </yd-infinitescroll>
        </yd-pullrefresh>
    </div>
</template>

<script>
export default {
    name: 'scroll',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            value: '',
            show: false,
            // model: '所有地区',
            fiexdItem: [],
            isActive: [],
            //分类ID
            isShow: false,
            list: [],
            page: 1,
            pageSize: 10,
            mondyPrice: 0,
            key: '',          //关键字
            p: 0,             //从第几条开始
            orderByType: '',  //ASC，DESC  排序
            orderByColum: '', //排序字段
            clsId: '',        // 分类id
            brandId: '',      //品牌id
            goodsTagId: '',   // 商品标签id
            startPrice: 0,    //最小价格
            endPrice: 0,      //最大价格
            type: '',      //品质生活页面的品质生活区分：jsjy、cyjj、mtyx
        }
    },
    created: function() {
        this.value = this.$store.state.searchValue;
        this.startPrice = this.$route.query.startPrice || 0;
        this.endPrice = this.$route.query.endPrice || 0;
        if (this.startPrice == 0 && this.endPrice == 100) {
            this.mondyPrice = 50
        } else if (this.startPrice == 100 && this.endPrice == 200) {
            this.mondyPrice = 150
        } else if (this.startPrice == 200 && this.endPrice == 300) {
            this.mondyPrice = 250
        } else if (this.startPrice == 301) {
            this.mondyPrice = 350
        }
        this.goodsTagId = this.$route.query.goodsTagId || '';
        this.type = this.$route.query.type || '';  // 品质生活页面跳转时的品质生活区分
        // 数据取得顺序：firstLevel -->> init
        this.firstLevel();
        // this.init();
    },
    methods: {
        firstLevel() {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'category/firstLevel')
                .then((response) => {
                    if (response.status == 200) {
                        this.fiexdItem = response.data.object;
                    }

                    // 数据的取得
                    //this.init();
                    let pageParams = this.$store.state.pageParams;
                    // 只要pageParams有值的话，就确定是从跳转后的页面返回的
                    if (pageParams) {
                        this.$store.commit('pageParams', ''); 
                        var paramObj = JSON.parse(JSON.stringify(pageParams));
                        this.goodsTagId = paramObj.goodsTagId;
                        this.type = paramObj.recommendType;
                        this.value = paramObj.searchContent;
                        this.mondyPrice = paramObj.mondyPrice;
                        this.startPrice = paramObj.startPrice;
                        this.endPrice = paramObj.endPrice;
                        this.clsId = paramObj.goodsClassId;
                        this.scrollPostion = paramObj.scrollPostion;
                        this.pageIndex = paramObj.pageIndex;
                        // 选择分类的设定                        
                        // 必选是当前页面，页面未加载完就跳转的话不能调用emit)
                        if (this.$refs.infinitescrollDemo != undefined) {                            
                            let callFiexdBtn = false;
                            for (let i=0; i<this.fiexdItem.length;i++) {
                                let goodsClass = this.fiexdItem[i];
                                if (goodsClass.gcId == this.clsId) {
                                     // fiexdBtn方法调用了init、infinitescrollDemo.emit
                                    this.fiexdBtn(goodsClass, i);
                                    callFiexdBtn = true;
                                    break;
                                }
                            }
                            
                            if (callFiexdBtn == false) {
                                this.init();
                            }
                        }
                    } else {
                        this.init();
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '商品分类的取得失败，请联系客服',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        init() {
            let msg = this.$qs.stringify({
                key: this.value,
                p: this.page,
                orderByType: 'DESC',
                pageSize: this.pageSize,
                startPrice: this.startPrice,
                endPrice: this.endPrice,
                goodsTagId: this.goodsTagId,
                goodsClassId: this.clsId, 
                recommendType: this.type,
            })
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'goods/search', msg)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        let _list = response.data.object;
                        this.list = [...this.list, ..._list];
                        
                        // 必选是当前页面，页面未加载完就跳转的话不能调用emit)
                        if (this.$refs.pullrefreshDemo != undefined) {
                            this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
                            if (_list.length < this.pageSize) {
                                /* 所有数据加载完毕 */
                                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                                return;
                            }
                            /* 单次请求数据完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                            this.page++;
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '商品信息的取得失败，请联系客服',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        //价格搜索
        searchSelect() {
            if (this.mondyPrice == 50) {
                this.startPrice = 0;
                this.endPrice = 100;
            } else if (this.mondyPrice == 150) {
                this.startPrice = 100;
                this.endPrice = 200;
            } else if (this.mondyPrice == 250) {
                this.startPrice = 200;
                this.endPrice = 300;
            } else if (this.mondyPrice == 350) {
                this.startPrice = 300;
                this.endPrice = '';
            } else {
                this.startPrice = 0;
                this.endPrice = 0;
            }
            this.page = 1;
            this.list = [];
            this.clsId = '';
            this.isActive = [];
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.init();
        },
        submitHandler() {
            this.page = 1;
            this.list = [];
            this.clsId = '';
            this.isActive = [];
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.init();
        },
        delHandler() {
            this.page = 1;
            this.list = [];
            this.clsId = '';
            this.isActive = [];
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.init();
        },
        fiexdGo() {
            this.$router.go(-1);
        },
        isShowBtn() {
            this.isShow = !this.isShow;
        },
        fiexdBtn(item, index) {
            if (this.isActive[index]) {
                this.clsId = '';
                this.$set(this.isActive, index, false);
            } else {
                this.clsId = item.gcId;
                this.isActive = [];
                this.$set(this.isActive, index, true);
            }
            this.page = 1;
            this.isShow = false;
            this.list = [];
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.init();
        },
        //下拉刷新
        loadList() {
            this.init();
        },
        //上滑加载
        loadListTop() {
            this.page = 1;
            this.list = [];
            this.clsId = '';
            this.isActive = [];
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.init();
        },
        commodity(goodsCommonid) {
            // 保存当前页面的条件
            let pageParams = {
                goodsTagId:  this.goodsTagId,
                recommendType: this.type,
                searchContent:  this.value,
                mondyPrice: this.mondyPrice,
                startPrice: this.startPrice,
                endPrice:  this.endPrice,
                goodsClassId: this.clsId, 
                pageIndex: this.page,
                scrollPostion: document.getElementById("qualitylist").scrollTop
            };
            this.$store.commit('pageParams', pageParams);
            this.$router.push({
                name: 'commodity', 
                query: { 
                    goodsCommonid: goodsCommonid 
                }
            });
        }
    }
}
</script>
<style scoped>
#qualitylist {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    padding-top: 2.1rem;
}

.fiexd_search {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 9;
    box-shadow: 0 3px 6px #DACDBA;
}

#qualitylist .fiexd_list {
    width: 100%;
    height: auto;
    padding: 0.2rem 0;
    overflow: hidden;
}

#qualitylist .fiexd_list .fiexd_lefts {
    float: left;
    width: 0.8rem;
    overflow: hidden;
    text-align: center;
}

.fiexd_lefts img {
    width: 0.4rem;
    height: 0.4rem;
    display: block;
    margin: 0.12rem auto;
}

#qualitylist .fiexd_list .fiexd_conter {
    float: left;
    width: calc(100% - 3.2rem);
    overflow: hidden;
    text-align: center;
}

#qualitylist .fiexd_list .fiexd_rights {
    float: right;
    width: 2.4rem;
    line-height: 0.7rem;
    overflow: hidden;
    text-align: center;
}

.fiexd_ul_list {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.fiexd_ul .active {
    background: #C1AD8C;
    color: #fff;
}

.arrow_btn {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    right: 0;
    text-align: center;
    line-height: 0.8rem;
    color: #C1AD8A;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -moz-transform: rotate(90deg);
    /* Firefox */
    -webkit-transform: rotate(90deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(90deg);
    top: 0.2rem;
}

#qualitylist .arrowShow {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    /* IE 9 */
    -moz-transform: rotate(-90deg);
    /* Firefox */
    -webkit-transform: rotate(-90deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-90deg);
}

.arrow_btn [class^="icon-custom-"]:before,
[class*=" icon-custom-"]:before {
    font-size: 0.4rem;
    position: relative;
    top: -0.05rem;
}

.fiexd_ul {
    width: 100%;
    height: 1.12rem;
    overflow: hidden;
    line-height: 0.6rem;
    font-size: 0.28rem;
    color: #4a4a4a;
    display: flex;
    border-top: 1px solid #BCBCBC;
    align-content: left;
    flex-wrap: wrap;
    justify-content: left;
    box-sizing: border-box;
    padding: 0.2rem 0;
    padding-bottom: 0.1rem;
    padding-right: 0.6rem;
    background: #fff;
    text-align: center;
}

#qualitylist .fiexdShow {
    height: auto;
}

#qualitylist .demo-list-price {
    font-size: 14px;
    color: #c7000a;
}

.decoration-price {
    margin-left:12px;
    font-size:10px;
    color:#666;
    text-decoration:line-through;
}

.fiexd_ul li {
    padding: 0 0.3rem;
    margin: 0.1rem;
    background: #F3EEE8;
    border-radius: 0.4rem;
}
</style>

<style>
#qualitylist .yd-list-img {
    min-height: 2rem;
    padding-bottom: 0!important;
}

#qualitylist .yd-list-img img {
    height: 3.35rem;
}

#qualitylist .yd-search-input:before,
#qualitylist .yd-search-input:after {
    border: 0;
}

#qualitylist .yd-search-input {
    padding: 2px 8px;
    border-radius: 20px;
    background-color: #F5EEE6!important;
}

#qualitylist .yd-search-input>.search-input {
    background-color: #F5EEE6!important;
}

#qualitylist .yd-cell-right select {
    height: 0.6rem;
}

#qualitylist .yd-cell-right {
    min-height: 0.6rem;
}

#qualitylist .yd-cell-arrow:after {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -moz-transform: rotate(90deg);
    /* Firefox */
    -webkit-transform: rotate(90deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(90deg);
    /* Opera */
}
</style>